<!-- 人脸识别上传头像 -->
<template>
    <van-action-sheet v-model:show="state.show" title="上传照片" cancel-text="取消" close-on-click-action teleport="body"
        @closed="closedFn()">
        <view class="upload-content">
            <view class="upload-content-title">
                上传清晰本人形象照片，不符合要求将无法通过
            </view>
            <view class="upload-content-img">
                <view class="upload-content-img-item" v-for="item in state.photoModalList" :key="item.id">
                    <img class="upload-content-img-item-photo" :src="props.curSex == 0 ? item.sex0 : item.sex1" alt="">
                    <img class="upload-content-img-item-is-no" :src="item.icon" alt="">
                    <text>{{ item.value }}</text>
                </view>
            </view>
            <view class="upload-content-item" @click="takePictures(1)">拍照</view>
            <view class="upload-content-item" @click="takePictures(2)">从相册中获取</view>
        </view>
    </van-action-sheet>
</template>
   
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { showLoadingToast, closeToast } from 'vant';
import { onLoad } from '@dcloudio/uni-app'
import c1 from "@/assets/image/icon106.png"
import bg3 from "@/assets/image/bg3.png"
import bg4 from "@/assets/image/bg4.png"
import bg6 from "@/assets/image/bg6.png"
import bg8 from "@/assets/image/bg8.png"
import bg5 from "@/assets/image/bg5.png"
import bg50 from "@/assets/image/bg50.png"
import bg7 from "@/assets/image/bg7.png"
import icon108 from "@/assets/image/icon108.png"
import icon107 from "@/assets/image/icon107.png"

const state = reactive({
    photoImg: c1,
    isPhoto: true,
    show: false,
    photoModalList: [
        {
            id: 1,
            value: "清晰近照",
            sex0: bg3,
            sex1: bg50,
            icon: icon108
        },
        {
            id: 2,
            value: "非人物照",
            sex0: bg4,
            sex1: bg4,
            icon: icon107
        },
        {
            id: 3,
            value: "模糊照",
            sex0: bg6,
            sex1: bg5,
            icon: icon107
        },
        {
            id: 4,
            value: "合照",
            sex0: bg8,
            sex1: bg7,
            icon: icon107
        }
    ]
})

const emits = defineEmits(['update:isShow', 'update:checkImg'])

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    curSex: {
        type: Number,
        default: 0,
    },
    imgCount:{
        type: Number,
        default: 9,
    }
})

const takePictures = (types) => {
    let arr = types == 1 ? ['camera'] : ['album']
    uni.chooseImage({
        count: props.imgCount, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: arr, //从相册选择
        success: function (res) {
            let tokenObj = getAuthorization("token") ? JSON.parse(getAuthorization("token")) : ""
            let token = tokenObj.AccessToken
            showLoadingToast({
                duration: 0,
                forbidClick: true,
                message: '图片上传中',
            });
            uni.uploadFile({
                url: '/api/app/api/G/user-heibai/v1/Files', //仅为示例，非真实的接口地址
                files: res.tempFiles.map(o => {
                    return {
                        name: o.name,
                        file: o,
                        uri: o.path
                    }
                }),
                name: 'file',
                header: {
                    "Authorization": "Bearer " + token
                },
                formData: {
                    'groupCode': '99999999'
                },
                success: (uploadFileRes) => {
                    let data = JSON.parse(uploadFileRes.data)
                    if (data.code == 200) {
                        emits("update:checkImg", data.data)
                        emits('update:isShow', false)
                    }
                },
                fail: (error) => {
                    uni.showToast({
                        title: error.message
                    })
                },
                complete: () => {
                    closeToast();
                }
            });
        }
    });
}

onLoad((options) => {
})

onMounted(() => {
    state.show = props.isShow
})

const closedFn = () => {
    emits('update:isShow', false)
}

const { proxy } = getCurrentInstance();


</script>
  
<style lang="scss" scoped>
.upload-content {
    .upload-content-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;
        margin: 36rpx 0 50rpx 0;
        text-align: center;
    }

    .upload-content-img {
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
    }

    .upload-content-img-item {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        overflow: hidden;
        position: relative;
        margin-bottom: 30rpx;


        img.upload-content-img-item-photo {
            width: 100%;
        }

        img.upload-content-img-item-is-no {
            width: 36rpx;
            position: absolute;
            right: 10rpx;
            top: 10rpx;
        }

        text {
            position: absolute;
            display: block;
            width: 100%;
            text-align: center;
            color: #fff;
            background: rgba(0, 0, 0, .5);
            bottom: 0;
            font-size: 28rpx;
            height: 40rpx;
        }
    }

    .upload-content-item {
        height: 80rpx;
        line-height: 80rpx;
        color: #333333;
        font-size: 32rpx;
        text-align: center;
        border-top: 1px solid #F7F8F9;
    }
}
</style>